<!--
 * @Describe: 可输入可选择组件
 * @Author:
 * @Date:
 * @LastEditTime:
 * @FilePath:
-->
<template>
  <vxe-pulldown ref="pulldownRef" style="width: 100%; height: 28px">
    <template #default>
      <el-input v-model="inputValue" @keyup="keyupEvent" @blur="onBlur" @change="onChange" @input="onInput">
        <template #append>
          <el-button :icon="ArrowDown" @click="focusEvent"> </el-button>
        </template>
      </el-input>
    </template>
    <template #dropdown>
      <vxe-list height="200" class="my-dropdown2" :data="list" auto-resize>
        <template #default="{ items }">
          <div class="list-item2" v-for="item in items" :key="item[values]" @click="selectEvent(item[labels])">
            <span>{{ item[labels] }}</span>
          </div>
        </template>
      </vxe-list>
    </template>
  </vxe-pulldown>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";
import { VxePulldown, VxeList } from "vxe-pc-ui";

const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return [];
    }
  },
  labels: {
    type: String,
    default: "label"
  },
  values: {
    type: [String, Number],
    default: "value"
  },
  value: {
    type: [String, Number],
    default: ""
  }
});
const emit = defineEmits(["update:value"]);
const inputValue = ref(props.value);
const list = ref<any>([]);
// Pulldown组件实例
const pulldownRef = ref();
// 聚集焦点,显示下拉框
const focusEvent = () => {
  pulldownRef.value?.showPanel();
  const value = inputValue.value;
  list.value = value ? props.data.filter((item: any) => item[props.labels].indexOf(value) > -1) : props.data;
};
const keyupEvent = (event: any) => {
  console.log("筛选", event);
  const value = event.target.value;
  list.value = value ? props.data.filter((item: any) => item[props.labels].indexOf(value) > -1) : props.data;
};
const selectEvent = (labels: string | number) => {
  inputValue.value = labels;
  pulldownRef.value?.hidePanel();
  emit("update:value", labels);
};
const onBlur = (event: any) => {
  list.value = props.data;
  emit("update:value", event.target.value);
};
const onInput = (value: string) => {
  emit("update:value", value);
};
const onChange = (value: string) => {
  emit("update:value", value);
};
</script>

<style lang="scss" scoped>
.list-item2 {
  width: 100%;
  cursor: pointer;
  overflow-x: hidden;
  text-overflow: ellipsis;
  &:hover {
    background-color: rgba(64, 169, 255, 0.2);
  }
}
</style>
